<template>
  <div>
    <div>
      <v-header :seller="seller"></v-header>
    </div>
    <div class="tab">
      <div class="tab-item"><router-link  to="/goods">商品</router-link></div>
      <div class="tab-item"><router-link :seller="{ratings}" to="/ratings">评论</router-link></div>
      <div class="tab-item"><router-link :seller="{seller}" to="/seller">商家</router-link></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import header from './components/header/header.vue'
  export default {
    data () {
      return {
        seller: {},
        goods: {},
        ratings: {}
      }
    },
    components: {
      'v-header': header
    },
    methods: {
      loadSeller (down) {
        // GET /someUrl
        this.$ajax.get('/api/seller').then(response => {
          this.seller = response.data.data
        }, response => {
          // error callback
        })
      }
//      loadGoods (down) {
//        // GET /someUrl
//        this.$ajax.get('/api/goods').then(response => {
//          this.goods = response.data.data
//        }, response => {
//          // error callback
//        })
//      },
//      loadRatings (down) {
//        // GET /someUrl
//        this.$ajax.get('/api/ratings').then(response => {
//          this.ratings = response.data.data
//        }, response => {
//          // error callback
//        })
//      }
    },
    created () {
      this.loadSeller()
//      this.loadRatings()
//      this.loadGoods()
    }
  }
</script>

<style rel="stylesheet" lang="stylus">
  @import '../src/common/stylus/base'
  .tab
    display: flex
    width :100%
    height :40px
    line-height: 40px
    boder-1px:(rgba(7,17,27,0.1))
    .tab-item
        flex :1
        text-align: center
        & > a
          display: block
          font-size: 14px
          color: rgb(77,85,93)
          &.active
            color:rgb(240,20,20)
</style>
